<template>
  <div class="content bg">
    <!-- 全屏容器 -->
    <dv-full-screen-container>

      <!-- 第二行 -->
      <div class="module-box"> 
        <div style="flex:0 1 33.33%">
          <dv-border-box-8 class="box-size">
            <dv-scroll-ranking-board :config="config" style="width:100%;height:300px" />
          </dv-border-box-8>
        </div>
        <div style="flex:0 1 33.33%">
          <dv-border-box-8 class="box-size">
            <!-- <dv-active-ring-chart class="ccmc-middle" :config="configBing"/> -->
            <h2>柱形图-就业行业</h2>
            <div class="chart" id="container">图标</div>
          </dv-border-box-8>
        </div>
        <div style="flex:0 1 33.33%">
          <dv-border-box-8 class="box-size">dv-border-box-8</dv-border-box-8>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'
export default {
  name: 'HomeView',
  data(){
    return{
      config:{
        data: [
          {
            name: '周口',
            value: 55123
          },
          {
            name: '南阳',
            value: 12022
          },
          {
            name: '西峡',
            value: 78932
          },
          {
            name: '驻马店',
            value: 63411
          },
          {
            name: '新乡',
            value: 44231
          },
          {
            name: '111',
            value: 44299
          }
        ],
        unit: '单位',
        valueFormatter ({ value }) {
          console.warn(arguments)
          const reverseNumber = (value + '').split('').reverse()
          let valueStr = ''

          while (reverseNumber.length) {
            const seg = reverseNumber.splice(0, 3).join('')
            valueStr += seg
            if (seg.length === 3) valueStr += ','
          }

          return valueStr.split('').reverse().join('')
        }
      },
      
      configBing: {
        data: [
          {
            name: "消防设备",
            value: 3
          },
          {
            name: "公共区域设备",
            value: 3
          },
          {
            name: "防洪防漏设备",
            value: 3
          },
        ],
        color: [
          "#FF5D1D",
          "#FFA91F",
          "#FFF803",
          "#9DF90D",
          "#11EA00",
          "#00FFF8",
          "#038CEA",
          "#2948FF",
          "#B283FC",
          "#A000EA",
          "#F746EA",
          "#AF1E59"
        ],
        lineWidth: 30,
        radius: "55%",
        activeRadius: "60%"
      }
    }
  },
  mounted(){
  //在mouted里面做了一个立即执行函数 ，防止里面的变量污染
    (function(){
    //下面和eacharts差不多
      const container =document.getElementById('container')

        const myChart = new Charts(container)
          var option={
              color:['#2f89cf'],
              grid:{
                  top:'0px'
              },
              // 这是控制标题的
              title: {
                text: '周销售额趋势',
                show:false,
                offset:[0,-20],//标题位置偏移
                style:{ //标题默认样式
                  fill: '#fff',
                  fontSize: 17,
                  fontWeight: '400',
                  textAlign: 'center',
                  textBaseline: 'bottom'
                },
              },
              //legend为图表提供图例标签功能，它允许用户隐藏/显示series中的某个子图表。
              // legend:{
              //     show:true,
              //     orient:'horizontal' | 'vertical',
              //     left:'50%'//图例标签左边距
              // },
              xAxis: {
                name: 'category',
                data: ["旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
                nameTextStyle: {
                  fill: '#fff',
                  fontSize: 10
                },
                axisLabel:{
                  style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                  }
                },
                 axisLine:{
                  style: {
                      stroke: '#fff',
                      lineWidth: 1
                    }
                }

              },
              yAxis: {
                data: 'value',
                max:'0%',
                axisLabel:{
                  style: {
                    fill: '#fff',
                    fontSize: 10,
                    rotate: 0
                  }
                },
                axisLine:{
                  style: {
                      stroke: '#fff',
                      lineWidth: 1
                    }
                },
                splitLine:{
                  style: {
                    color: '#fff',
                    lineWidth: 1
                  }
                }
              },
              series: [
                {
                  data: [200, 300, 300, 900, 1500, 1200, 600],
                  type: 'bar',
                  barWidth:'50%',
                  
                }
              ]
          }

        myChart.setOption(option)
        //图表自适应
       window.addEventListener("resize", function() {
        myChart.resize();
      });

    })()
  }
  
}
</script>

<style scoped>
  .box-size{
    width: 100%;
    height: 50vh;
  }
  .chart{
    height: 240px;
    margin-left: 15px;
  }
  
  h2{
    height: 48px;
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 48px;
  }
</style>
